<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素保留或删除</title>
</head>
<body>
<div id="change" class="change">
    <h1 data-if="true" style="background-color: green">Hello， World！</h1>
    <h1 data-if="false" style="background-color: red">Hello， World！</h1>
</div>

<script !src="">
    // step1 获取目标所有的元素
    let elements = document.querySelectorAll("#change h1");

    // step2 遍历目标元素，并进行处理
    for (let i = 0; i < elements.length; i++) {
        // console.log(elements[i]);

        // step3 获取元素所有的属性
        let attributeNames = elements[i].getAttributeNames();

        // step4 遍历元素所有的属性
        for (let j = 0; j < attributeNames.length; j++) {
            // console.log(attributeNames[j]);

            if (attributeNames[j] === 'data-if') {
                // console.log(elements[i].getAttribute(attributeNames[j]));

                // step5 获取元素属性的值，判断是否保留该元素
                if (elements[i].getAttribute(attributeNames[j]) === 'false') {
                    // 删除元素
                    elements[i].remove()
                }
            }
        }
    }
</script>
</body>
</html>